<template>
  <div class="manage">
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handelClose">
      <!--新增表单信息 -->
      <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
        <el-form-item label="上级菜单" prop="parentId" style="width: 100%">
          <el-cascader
            v-model="form.parentId"
            :show-all-levels="false"
            :options="parentData"
            :props="{ checkStrictly: true , label:'menuName', children: 'menus', emitPath:false, value:'menuId' }"
            clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="0">目录</el-radio>
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input placeholder="请输入菜单名称" v-model="form.menuName"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-select v-model="form.icon" clearable placeholder="请选择">
            <el-option
              v-for="item in elIcon"
              :key="item.id"
              :label="item.value"
              :value="item.value">
              <i :class="`el-icon-${item.value}`"></i>{{item.value}}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示排序" prop="orderNum">
          <el-input-number v-model="form.orderNum" controls-position="right" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="路径地址" prop="url" style="width: 100%">
          <el-input placeholder="路径地址" v-model="form.url" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="权限字符" prop="perms">
          <el-input placeholder="权限字符" v-model="form.perms"></el-input>
        </el-form-item>
        <el-form-item label="菜单状态" prop="delFlag">
          <el-radio v-model="form.delFlag" :label="0">正常</el-radio>
          <el-radio v-model="form.delFlag" :label="1">停用</el-radio>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!--form 搜索区-->
    <el-form :inline="true" :model="form">
      <el-form-item label="菜单名称">
        <el-input placeholder="请输入菜单名称" v-model="userForm.menuName" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="菜单状态">
        <el-select v-model="userForm.delFlag" clearable placeholder="菜单状态" size="mini">
          <el-option
            v-for="item in delFlag"
            :key="item.code"
            :label="item.value"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini">确 定</el-button>
      </el-form-item>
    </el-form>
    <!--操作区-->
    <div class="manage-header">
      <el-button @click="handelAdd" type="primary" size="mini" plain>
        <i class="el-icon-plus"></i>新增
      </el-button>
      <el-button @click="handelEedit" type="info" size="mini" plain>
        <i class="el-icon-sort"></i>展开/折叠
      </el-button>
    </div>
    <div class="common-table">
      <!--内容-->
      <el-table
        v-if="ifTable"
        :data="tableData"
        stripe
        height="100%"
        style="width: 100%;"
        row-key="menuId"
        :default-expand-all="handelE"
        :tree-props="{children: 'menus'}">
        <el-table-column
          fixed
          prop="menuName"
          label="菜单名称"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="icon"
          label="图标">
          <template slot-scope="scope">
            <i :class="`el-icon-${scope.row.icon}`"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNum"
          sortable
          label="排序">
        </el-table-column>
        <el-table-column
          prop="url"
          label="路径"
          width="180">
        </el-table-column>
        <el-table-column
          prop="perms"
          width="150"
          label="权限标识">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.type == 0 ? '目录' : (scope.row.type == 1 ? '菜单' : '按钮')  }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="状态" width="100">
          <template slot-scope="scope">
            <a @click="updateDelFlag(scope.row)">
              <el-switch
                v-model="scope.row.delFlag==0 ? true : false"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </a>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="170"
          label="创建时间">
        </el-table-column>
        <el-table-column prop="" label="操作" width="165" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handelEditMenu(scope.row)"><i class="el-icon-edit"></i>修改</el-button>
            <el-button type="text" size="mini" @click="handelAddMenu(scope.row)"><i class="el-icon-plus"></i>新增</el-button>
            <el-button type="text" size="mini" @click="handelDelMenu(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
    import { saveOrUpdateMenu, delMenu, editMenu , listQueryMenuTree, listMenuTree, listElicon} from "../api"
    export default {
        name: "Menu",
        data(){
            return{
                dialogVisible:false,
                form: {
                    menuId: '',
                    parentId: 0,
                    menuName: '',
                    url: '',
                    perms: '',
                    type: 0,
                    icon: '',
                    orderNum: 1,
                    delFlag: 0
                },
                rules:{
                    menuName: [
                        {required: true,message: '菜单名称不能为空'}
                    ],
                    url: [
                        {required: true,message: '菜单路径不能为空'}
                    ],
                    orderNum: [
                        {required: true,message: '路径地址不能为空'}
                    ]
                },
                tableData: [],
                parentData: [],
                modelType: 0,  //0：新增，1：修改
                //查询条件
                userForm: {
                    menuName: "",
                    delFlag: ''
                },
                handelE: false,
                ifTable: true,
                delFlag: [
                    {
                        code: 0,
                        value: '正常'
                    },
                    {
                        code: 1,
                        value: '停用'
                    }
                ],
                elIcon: []
            }
        },
        methods:{
            //展开折叠
            handelEedit(){
                this.ifTable=false;
                this.handelE=!this.handelE;
                this.$nextTick(() => {
                    this.ifTable = true
                });
            },
            //提交用户表单
            submit(){
                //进行校验
                this.$refs.form.validate((valid)=>{
                    if (valid){
                        if (this.modelType == 0){
                            //新增
                            this.form.menuId=null;
                            saveOrUpdateMenu(this.form).then(({ data })=>{
                                this.$message({
                                    type: data.type,
                                    message: data.message
                                });
                                this.listQueryMenuTree();
                            });
                        }else{
                            //修改
                            const { menus , ...newForm} = this.form;
                            saveOrUpdateMenu(newForm).then(({ data }) => {
                                this.$message({
                                    type: data.type,
                                    message: data.message
                                });
                                this.listQueryMenuTree();
                            });
                        }
                        this.handelClose();
                    }
                });
            },
            //弹窗关闭的时候
            handelClose(){
                //重置表单
                this.$refs.form.resetFields();
                this.dialogVisible=false;
            },
            //点击取消
            cancel(){
                this.handelClose();
            },
            //编辑
            handelEditMenu(row){
                this.listMenuTree();
                this.modelType=1;
                this.dialogVisible=true;
                //查找出数据,并编辑
                this.editMenu(row);
            },
            //查找出数据,并编辑
            editMenu(row){
                this.form=JSON.parse(JSON.stringify(row));
                /*editMenu(row).then(({data})=> {
                    this.form = data;
                });*/
            },
            //在字段内新增
            handelAddMenu(row){
                this.handelAdd();
                this.form.parentId=row.menuId;
            },
            //修改状态
            updateDelFlag(row){
                this.$confirm('确定要“'+(row.delFlag == 0 ? "停用" : "启用")+'”“'+row.menuName+'吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    row.delFlag=(row.delFlag == 0 ? 1 : 0);
                    //用解构的方法删除menus这个元素,neRrow是产生的新对象，该方法不会改变原有对象，不像Reflect.deleteProperty(row, 'menus');
                    const { menus, ...newRow } = row;
                    //修改
                    saveOrUpdateMenu(newRow).then(({ data }) => {
                        this.listQueryMenuTree();
                        this.$message({
                            type: data.type,
                            message: data.message
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            //删除
            handelDelMenu(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delMenu(row).then(({ data })=>{
                        this.listQueryMenuTree();
                        this.$message({
                            type: data.type,
                            message: data.message
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //新增
            handelAdd(){
                this.form={
                    menuId: '',
                    parentId: 0,
                    menuName: '',
                    url: '',
                    perms: '',
                    type: 0,
                    icon: '',
                    orderNum: 1,
                    delFlag: 0
                };
                this.listMenuTree();
                this.modelType=0;
                this.dialogVisible=true;
            },
            //获取菜单列表
            listQueryMenuTree(){
                listQueryMenuTree(this.userForm).then(({data})=>{
                    this.tableData=data;
                });
            },
            listMenuTree(){
                listMenuTree().then(({data})=>{
                    this.parentData=[{
                        menuId: 0,
                        menuName: '主类目',
                        delFlag: 0,
                        menus: data
                    }];
                });
            },
            listElicon(){
                listElicon().then(({data})=>{
                    this.elIcon=data;
                });
            },
            //条件查询
            onSubmit(){
                this.listQueryMenuTree();
            }
        },
        //页面首次加载时调用的地方
        mounted() {
            this.listQueryMenuTree();
            this.listElicon();
        }
    }
</script>

<style lang="less" scoped>
  .manage{
    height: 90%;
    .manage-header{
      display: flex;
      //justify-content: space-between;
      align-items: center;
    }
    .common-table{
      position: relative;
      //动态计算高度
      height: calc(100% - 62px);
      .pager{
        position: absolute;
        bottom: 0;
        right: 20px;
      }
    }
  }
</style>
